<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HiBot Map</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

div {
	float: left;
}

#container {
	height: 100%;
	width: 75%
}

#r-result {
	height: 100%;
	width: 15%;
	padding-top: 20px;
	padding-left: 20px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8UHgZhYbAHxB5TOzuxU6sFQx9jeKScGx"></script>
<script type="text/javascript">
    var ip; 
	function getRobotInfo() {
		var id = location.search.substring(1).split("=")[1];
		$.ajax({
			url : "/HiBotServer/api/v1/client/id/" + id,
			type : "get",
			dataType : "json",
			success : function(result) {
				showClientInfo(result)
			},
			error : function() {
				console.log("失败");
			}
		});
	}

	function showClientInfo(result) {
		console.log("result:" + result.ip);
		//$('#info_ip').html(result.ip）；
		ip = result.ip;
	}
	
	// 显示详细信息
	function showDetailInfo(longitude, latitude, clientId, timeUpload, ip) {
		$("#info_id").val(clientId);
		$("#info_ip").val(ip);
		$("#info_longitude").val(longitude);
		$("#info_latitude").val(latitude);
		$("#info_timeUpload").val(timeUpload);
	}

	// 用经纬度设置地图中心点
	function changeLocation(longitude, latitude, clientId, timeUpload, ip) {
		if (longitude != "" && latitude != "") {
			map.clearOverlays();
			var new_point = new BMap.Point(longitude, latitude);

			//http://developer.baidu.com/map/jsdemo/img/car.png 32,70
			var myIcon = new BMap.Icon("UAV.png", new BMap.Size(50, 50), { //小车图片
				//offset: new BMap.Size(0, -5),    //相当于CSS精灵
				imageOffset : new BMap.Size(0, 0)
			//图片的偏移量。为了是图片底部中心对准坐标点。
			});
			var marker = new BMap.Marker(new_point, {
				icon : myIcon
			}); // 创建标注
			//marker.enableDragging();             //设置标注可拖拽
			//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			map.addOverlay(marker); // 将标注添加到地图中
			map.panTo(new_point);

			//新加的点击显示信息
			var opts = {
				width : 150, // 信息窗口宽度
				height : 150, // 信息窗口高度
				title : "详细信息", // 信息窗口标题
				enableMessage : true,//设置允许信息窗发送短息
				message : "亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
			}

			var showMessage = "编号：" + clientId + " <br/>经度：" + longitude
					+ " <br/>纬度：" + latitude + " <br/>上传时间：" + timeUpload
					+ " <br/>";
			var infoWindow = new BMap.InfoWindow(showMessage, opts); // 创建信息窗口对象
			marker.addEventListener("click", function() {
				map.openInfoWindow(infoWindow, new_point); //开启信息窗口
				
				//右侧详细信息的显示
				showDetailInfo(longitude, latitude, clientId, timeUpload, ip);
			});

		}
	}
	function loadSingleLocation() {
		var id = location.search.substring(1).split("=")[1];
		//console.log(id);
		getRobotInfo();
		$.ajax({
			url : "/HiBotServer/api/v1/location/id/" + id,
			type : "get",
			dataType : "json",
			success : function(result) {
				var longitude = result.longitude;//经度
				var latitude = result.latitude;//纬度
				var clientId = result.clientId;//编号
				var timeUpload = result.timeUpload;//上传时间
				//alert(ip);
				changeLocation(longitude, latitude, clientId, timeUpload, ip);
			},
			error : function() {
				console.log("加载地图位置失败");
			}
		});
	}
	$(function() {

		getRobotInfo();
		loadSingleLocation();
		window.setInterval(loadSingleLocation, 5000);
	});
</script>
</head>

<body>
	<div id="container"></div>
	<!-- <div id="r-result">

		<div id='info_name'>	<p>无人机名称</p></div>
		
		<div id='info_ip'>	<p>无人机名称</p></div>
		
		<div id='info_idmac'>	<p>无人机名称</p></div>
		
		<div id='info_idmac'>	<p>无人机名称</p></div>

	</div> -->
	<div id="r-result">
		搜索:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" />
		<p>
			无人机ID:<input type="text" id='info_id' value="xxx" readonly="true"/> 
		</p>
		<p>
			IP:<input type="text" id='info_ip' value="xxx" readonly="true"/> 
		</p>
		<p>
			经度:<input type="text" id='info_longitude' value="xxx" readonly="true"/> 
		</p>
		<p>
			纬度:<input type="text" id='info_latitude' value="xxx" readonly="true"/> 
		</p>
		<p>
			上传时间:<input type="text" id='info_timeUpload' value="xxx" readonly="true"/> 
		</p>
	</div>
	<div id="searchResultPanel"
		style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;">
	</div>
	<script type="text/javascript">
		// 百度地图API功能
		function G(id) {
			return document.getElementById(id);
		}
		var map = new BMap.Map("container"); // 创建地图实例
		var point = new BMap.Point(116.404, 39.915); // 创建点坐标
		map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
		map.enableScrollWheelZoom(); // 可以滚轮缩放

		//添加城市列表
		var size = new BMap.Size(80, 20);
		map.addControl(new BMap.CityListControl({
			anchor : BMAP_ANCHOR_TOP_LEFT,
			offset : size,
		// 切换城市之间事件
		// onChangeBefore: function(){
		//    alert('before');
		// },
		// 切换城市之后事件
		// onChangeAfter:function(){
		//   alert('after');
		// }
		}));
		//向地图添加带定位的导航控件
		var navigationControl = new BMap.NavigationControl({
			// 靠左上角位置
			anchor : BMAP_ANCHOR_TOP_LEFT,
			// LARGE类型
			type : BMAP_NAVIGATION_CONTROL_LARGE,
			// 启用显示定位
			enableGeolocation : true
		});
		map.addControl(navigationControl);
		// 添加定位控件
		var geolocationControl = new BMap.GeolocationControl();
		geolocationControl.addEventListener("locationSuccess", function(e) {
			// 定位成功事件
			var address = '';
			address += e.addressComponent.province;
			address += e.addressComponent.city;
			address += e.addressComponent.district;
			address += e.addressComponent.street;
			address += e.addressComponent.streetNumber;
			alert("当前定位地址为：" + address);
		});
		geolocationControl.addEventListener("locationError", function(e) {
			// 定位失败事件
			alert(e.message);
		});
		map.addControl(geolocationControl);
		//添加比例尺控件
		map.addControl(new BMap.ScaleControl());
		//缩略图
		//map.addControl(new BMap.OverviewMapControl());
		var overViewOpen = new BMap.OverviewMapControl({
			isOpen : true,
			anchor : BMAP_ANCHOR_BOTTOM_RIGHT
		});
		map.addControl(overViewOpen)
		map.addControl(new BMap.MapTypeControl());
		//map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

		// 用经纬度设置地图中心点
		/* function theLocation() {
			if (document.getElementById("longitude").value != ""
					&& document.getElementById("latitude").value != "") {
				map.clearOverlays();
				var new_point = new BMap.Point(document
						.getElementById("longitude").value, document
						.getElementById("latitude").value);

				var myIcon = new BMap.Icon("UAV.png", new BMap.Size(500, 500),
						{ //小车图片
							//offset: new BMap.Size(0, -5),    //相当于CSS精灵
							imageOffset : new BMap.Size(0, 0)
						//图片的偏移量。为了是图片底部中心对准坐标点。
						});
				var marker = new BMap.Marker(new_point, {
					icon : myIcon
				}); // 创建标注
				marker.enableDragging(); //设置标注可拖拽
				map.addOverlay(marker); // 将标注添加到地图中
				map.panTo(new_point);
			}
		} */

		//智能搜索
		var ac = new BMap.Autocomplete( //建立一个自动完成的对象
		{
			"input" : "suggestId",
			"location" : map
		});

		ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
			var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province + _value.city + _value.district
						+ _value.street + _value.business;
			}
			str = "FromItem<br />index = " + e.fromitem.index
					+ "<br />value = " + value;

			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province + _value.city + _value.district
						+ _value.street + _value.business;
			}
			str += "<br />ToItem<br />index = " + e.toitem.index
					+ "<br />value = " + value;
			G("searchResultPanel").innerHTML = str;
		});

		var myValue;
		ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
			var _value = e.item.value;
			myValue = _value.province + _value.city + _value.district
					+ _value.street + _value.business;
			G("searchResultPanel").innerHTML = "onconfirm<br />index = "
					+ e.item.index + "<br />myValue = " + myValue;

			setPlace();
		});

		function setPlace() {
			map.clearOverlays(); //清除地图上所有覆盖物
			function myFun() {
				var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
				map.centerAndZoom(pp, 18);
				map.addOverlay(new BMap.Marker(pp)); //添加标注
			}
			var local = new BMap.LocalSearch(map, { //智能搜索
				onSearchComplete : myFun
			});
			local.search(myValue);
		}
	</script>

</body>
</html>
